<template>
	<view class="regular-page">
		<view style="height: var(--status-bar-height);"></view>
		<view class="regular-money">
			<view class="regular-coins">
				<view class="regular-coin-cls">
					<view class="regular-coin-label">{{i18n.available}}</view>
					<view class="regular-coin-val">{{data.money || '0.00'}}</view>
				</view>
				<view class="regular-coin-cls">
					<view class="regular-coin-label">{{i18n.freeze}}</view>
					<view class="regular-coin-val">{{data.freeze || '0.00'}}</view>
				</view>
				<view class="regular-coin-cls">
					<view class="regular-coin-label">{{i18n.equivalent}}(CNY)</view>
					<view class="regular-coin-val">{{data.sum_cny || '0.00'}}</view>
				</view>
			</view>
		</view>
		<view class="regular-title">
			<text>{{i18n.records}}</text>
			<view class="regular-screen" @click="toshow" >
				<text class="iconfont icon-screen">&#xe602;</text>
				<view class="regular-screen-text">{{i18n.filter}}</view>
			</view>
		</view>
		<view class="regular-list">
			<navigator class="regular-item" :url="'coinDetail?data='+JSON.stringify(item)+'&coin_name='+data.coin_name" v-for="(item, index) in list" :key="index">
				<view class="regular-item-top">
					<text class="regular-item-tl">{{item.type_text}}</text>
					<text class="iconfont regular-item-tr">&#xe600;</text>
				</view>
				<view class="regular-item-bottom">
					<view class="regular-bottom-item">
						<view class="regular-bi-label">{{i18n.num}}</view>
						<view class="regular-bi-val">{{item.money}}</view>
					</view>
					<view class="regular-bottom-item">
						<view class="regular-bi-label">{{i18n.status}}</view>
						<view class="regular-bi-val">{{i18n.success}}</view>
					</view>
					<view class="regular-bottom-item">
						<view class="regular-bi-label">{{i18n.time}}</view>
						<view class="regular-bi-val">{{item.createtime}}</view>
					</view>
				</view>
			</navigator>
			<uni-load-more :status="loadStatus" v-if="list.length > 0"></uni-load-more>
			<no-record  v-if="list.length == 0"></no-record>
		</view>
		<w-picker
			v-if="types.length!=0"
			mode="selector" 
			@confirm="onConfirm" 
			ref="selector" 
			themeColor="var(--theme-color)"
			:selectList="types"
			:confirm="i18n.confirm"
			:cancel="i18n.cancel"
		></w-picker>
	</view>
</template>

<script>
	import navHeader from '@/components/nav-header/nav-header.vue'
	import NoRecord from "@/components/NoRecord.vue"
	import wPicker from "@/components/w-picker/w-picker.vue";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore,wPicker,NoRecord,navHeader
		},
		data (){
			return {
				list: [],
				loadStatus: 'noMore',
				page: 1,
				data: {},
				type: null,
				type_id: null,
				types: [],
				coin_name:''
			}
		},
		onLoad(e) {
			this.data = e
			this.getData()
			this.getTypes()
			uni.setNavigationBarTitle({
			 title: e.coin_name
			})
		},
		onShow (){
			this.getDetail()
		},
		onReachBottom() {
			if(this.loadStatus === 'more'){
				this.page++
				this.getData()
			}
		},
		computed:{
			i18n() {
				return this.$t('coin');
			}
		},
		methods: {
			toshow(){
				this.$refs.selector.show();
			},
			getDetail() {
				let coin_id = this.data.id
				this.$post('api/funds/balance', {coin_id}).then(res=>{
					if(res && res.data && res.data.id){
						res.data.id = res.data.coin_id
						this.data = Object.assign(this.data, res.data)
					}
				})
			},
			//筛选
			onConfirm(val){
				this.type_id = val.checkArr.value
				this.page = 1
				this.getData()
			},
			//获取财务记录
			getData() {
				let page = this.page
				let type_id = this.type_id
				this.loadStatus = 'loading'
				let data = {
					coin_id: this.data.id, page
				}
				typeof type_id !== 'object' && (data.type_id = type_id)
				this.$get('api/bill/propertyRecord', data, {
					store: 1,
					getStore: (data)=>{
						if(data && page === 1){
							this.list = data
						}
					}
				}).then(res=>{
					this.loadStatus = res.data.has_more ? 'more' : 'noMore'
					if(page === 1){
						this.list = res.data.data
					}else{
						this.list = [...this.list, ...res.data.data]
					}
				})
			},
			//获取筛选类型
			getTypes (){
				this.$get('api/bill/propertType', {
					coin_id: this.data.id
				}).then(res=>{
					let types = [{value: null, label: this.$t('coin.all')}]
					if(res.code == 200 && res.data){
						for(let key in res.data){
							types.push({
								value: key,
								label: res.data[key]
							})
						}
					}
					this.types = types
				})
			}
		},
	}
</script>

<style lang="less">
	.regular-page{
		padding-top: 10upx;
	}
	.regular-title{
		display: flex;
		justify-content: space-between;
		padding-left: 30upx;
		font-size: 32upx;
		line-height: 100upx;
		height: 100upx;
	}
	.regular-list{
		display: block;
		padding: 20upx 30upx 140upx 30upx;
	}
	.regular-item{
		padding: 20upx 0;
		border-bottom: 1px var(--border) solid;
	}
	.regular-item-top{
		display: flex;
		justify-content: space-between;
	}
	.regular-item-tl{
		font-size: 28upx;
		font-weight: bold;
	}
	.regular-item-tr{
		font-size: 24upx;
		color: var(--txt-color);
	}
	.regular-item-bottom{
		display: flex;
		margin-top: 20upx;
	}
	.regular-bottom-item{
		&:nth-child(1){
			flex: 2;
		}
		&:nth-child(2){
			flex: 1;
			text-align: center;
		}
		&:nth-child(3){
			flex: 3;
			text-align: right;
		}
	}
	.regular-bi-label{
		color: var(--txt-color);
		font-size: 24upx;
	}
	.regular-bi-val{
		font-size: 28upx;
		margin-top: 16upx;
	}
	.regular-money{
		padding: 40upx 30upx 0;
		background-color: var(--block-color);
	}
	.regular-coin-money{
		text-align: center;
		font-size: 60upx;
		height: 76upx;
		line-height: 76upx;
		margin-bottom: 16upx;
		font-weight: bold;
	}
	.regular-coin-amount{
		font-size: 28upx;
		margin-bottom: 40upx;
		text-align: center;
	}
	.regular-coins{
		display: flex;
		justify-content: space-between;
		text-align: center;
		align-items: center;
		margin-bottom: 20upx;
	}
	.regular-coin-cls{
		flex: 1;
		&:nth-child(1){
			text-align: left;
		}
		&:nth-child(2){
			text-align: center;
		}
		&:nth-child(3){
			text-align: right;
		}
	}
	.regular-coin-val{
		font-size: 28upx;
		line-height: 40upx;
		margin-bottom: 14upx;
		margin-top: 10upx;
	}
	.regular-coin-label{
		color: var(--txt-color);
		font-size: 24upx;
		line-height: 34upx;
	}
	.regular-btns{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.icon-screen{
		font-size: 40upx;
		font-weight: 400;
	}
	.regular-screen{
		padding-right: 30upx;
		display: inline-flex;
	}
	.regular-screen-text{
		font-weight: 400;
		font-size: 28upx;
		margin-left: 6upx;
	}
	.regula-pos{
		display:flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15upx 40upx;
		.regular-btn{
			flex: 1;
			font-size: 28upx;
			display:flex;
			align-items: center;
			background-color: var(--block-color);
			justify-content: center;
			padding: 16upx 0;
			border-radius: 10upx;
			margin: 0 15upx;
			.img{
				width: 30upx;
				height: 30upx;
				margin-right: 10upx;
			}
			.regular-btn-text{
				font-size: 24upx;
			}
		}
	}
	
</style>

